import React, { useState } from "react"
import { Button, Image, Text, View } from "@tarojs/components"
import Taro from "@tarojs/taro"
import GpContainer from "@/components/GpContainer"
import { NAVIGATION_BASE_LAYOUT, useSetState } from "@/utils/hooks"
import { Checkbox } from "@taroify/core"
import styles from "./index.module.scss"
import { loginByPhone, patchExtra } from "@/store/actions/auth"
import { useAppDispatch } from "@/store/hook"
import { navigation } from "@/utils/router"
import { pageMapper } from "@/constants/pageMap"
import GpNavbar from "@/components/GpNavbar"

type IState = {
  accepted: boolean
}
/**
 * @page 授权登录
 */
export default function AuthLogin() {
  const dispatch = useAppDispatch()
  const [layout, setLayout] = useState<NavigationBaseLayout>(NAVIGATION_BASE_LAYOUT)
  const [state, setState] = useSetState<IState>({
    accepted: false
  })
  async function onGetPhoneNumber(ev: any) {
    const { detail } = ev
    if (detail.errMsg === "getPhoneNumber:ok") {
      const { code, encryptedData, iv } = detail
      const { headImage, nickName } = (await dispatch(
        loginByPhone({ code, data: encryptedData, iv }) as any
      )) as IUserInfo
      if (headImage && nickName) {
        Taro.navigateBack()
      } else {
        const cb = () => Taro.navigateBack()
        dispatch(
          patchExtra({
            showAuthModal: true,
            authModalCancelFn: cb,
            authModalConfirmFn: cb
          })
        )
      }
    }
  }
  function handleClickPhone() {
    if (!state.accepted) {
      Taro.showToast({ title: "请先同意相关协议", icon: "none" })
      return
    }
  }
  function renderNavigation() {
    return (
      <GpNavbar
        navigationBarPlaceholder={false}
        navigationBarBackgroundColor="trnasparent"
        navigationBarTitleText="授权登录"
        onLayout={setLayout}
      />
    )
  }
  function renderContent() {
    return (
      <View className={styles.main}>
        <View
          style={{
            height: layout.statusBarHeight + layout.navigationHeight + "px"
          }}
        ></View>
        <View className={styles.content}>
          <Image
            src="https://static.91goodschool.com/UpFiles/public/yikao/image/authloginicon.png"
            className={styles.logo}
          />
          {state.accepted ? (
            <Button
              openType="getPhoneNumber"
              className={styles.phoneBtn}
              onGetPhoneNumber={onGetPhoneNumber}
            >
              授权手机号
            </Button>
          ) : (
            <Button className={styles.phoneBtn} onClick={handleClickPhone}>
              授权手机号
            </Button>
          )}
          <View className={styles.texts}>
            <Text>为了提供更好的社区体验，请授权您的手机号，以便</Text>
            <Text>您可以:</Text>

            <Text>-发布社区笔记</Text>
            <Text>-与社区成员互动</Text>
            <Text>-接收个性化的社区通知</Text>
          </View>
          <View className="flex flex-row items-center box-border text-28px text-bold mt-146px">
            <Checkbox
              size={16}
              className="text-28px"
              checked={state.accepted}
              onChange={accepted => setState({ accepted })}
            >
              已阅读并同意
            </Checkbox>
            <View
              className="text-primary"
              onClick={() =>
                navigation(pageMapper.external, {
                  url: process.env.__USER_AGREEMENT__
                })
              }
            >
              《用户协议》
            </View>
            <View>和</View>
            <View
              className="text-primary"
              onClick={() =>
                navigation(pageMapper.external, {
                  url: process.env.__PRIVACY_POLICY__
                })
              }
            >
              《隐私政策》
            </View>
          </View>
        </View>
      </View>
    )
  }
  return (
    <GpContainer className={styles.container}>
      <View className="bgBox bgBox1">
        {renderNavigation()}
        {renderContent()}
      </View>
    </GpContainer>
  )
}
